<template>
  <view class="page-wrap">
    <view style="top: 0px; left: 0px; z-index: 999; width: 100%">
      <u--image :showLoading="true" mode="widthFix" :src="schema.bgurl" width="100%" height="none"></u--image>
    </view>
    <view class="form-wrap">
      <view v-if="'{}' == JSON.stringify(schema)">等待加载</view>
      <template v-else>
        <view class="f-title">{{ schema.title }}</view>
        <u--form labelPosition="left" :model="model" ref="uForm">
          <template v-for="comp in schema.components">
            <view class="design-btns" v-if="isDesign && currentEle == comp.id">
              <view style="flex: 1"></view>
              <u-button text="复制" icon="file-text" :customStyle="btnStyle" type="success" size="mini"> </u-button>
              <u-button text="删除" icon="trash" :customStyle="btnStyle" type="error" size="mini"> </u-button>
            </view>
            <!-- 文本输入 -->
            <u-form-item v-if="comp.type == 'textInput'" :prop="comp.model" :labelWidth="comp.labelWidth || 45" :label="comp.label" borderBottom :ref="'c' + comp.id">
              <u--input @input="(e) => (model[comp.model] = e)" :value="model[comp.model]" border="none" :placeholder="comp.placeholder"></u--input>
            </u-form-item>

            <!-- 时间选择 -->
            <u-form-item v-else-if="comp.type == 'datetime'" @click="popups[comp.model] = true" :labelWidth="comp.labelWidth || 45" :label="comp.label" borderBottom :ref="'c' + comp.id">
              <div>{{ model[comp.model] | toDatetime }}</div>
              <u-icon slot="right" name="arrow-right"></u-icon>
              <u-datetime-picker @confirm="DTPConfirm" @cancel="DTPCancel" :show="popups[comp.model]" :modelName="comp.model" v-model="model[comp.model]" mode="datetime"></u-datetime-picker>
            </u-form-item>

            <!-- 多选框 -->
            <u-form-item v-else-if="comp.type == 'checkbox'" :labelWidth="comp.labelWidth || 45" :label="comp.label" borderBottom :ref="'c' + comp.id">
              <u-checkbox-group v-model="model[comp.model]" placement="column">
                <u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in comp.opts" :key="index" :label="item.name" :name="item.name"> </u-checkbox>
              </u-checkbox-group>
            </u-form-item>

            <!-- 单选框 -->
            <u-form-item v-else-if="comp.type == 'radio'" :labelWidth="comp.labelWidth || 45" :label="comp.label" borderBottom :ref="'c' + comp.id">
              <u-radio-group :value="model[comp.model]" @change="(e) => (model[comp.model] = e)">
                <u-radio :customStyle="{ marginRight: '8px' }" v-for="(item, index) in comp.opts" :key="index" :label="item.name" :name="item.name"> </u-radio>
              </u-radio-group>
            </u-form-item>

            <view class="u-demo-block" v-else-if="comp.type == 'upload'">
              <text class="u-demo-block__title" style="color: #303133; font-size: 15px; line-height: 30px">{{ comp.label }}</text>
              <view class="u-demo-block__content">
                <view class="u-page__upload-item">
                  <u-upload :fileList="model[comp.model]" name="3" multiple :maxCount="2" :previewFullImage="true"></u-upload>
                </view>
              </view>
            </view>
          </template>
        </u--form>
      </template>
    </view>
  </view>
</template>

<script>
import { getRule, getDefault } from './service'
function __Constructor__(sc) {
  return sc['components'].reduce(
    (pre, cur) => {
      if (cur.model) pre.model[cur.model] = getDefault(cur)
      if (cur.ruletype) pre.rules[cur.model] = getRule(cur)
      if (cur.withpop) pre.popups[cur.model] = false
      return pre
    },
    { model: {}, popups: {}, rules: {} }
  )
}

export default {
  name: 'FormRender',
  data() {
    return {
      btnStyle: {
        width: '56px',
        'margin-right': '6px',
        position: 'relative',
        top: '-25px',
      },
      currentEle: '001',
      schema: {},
      model: {},
      popups: {},
      isDesign: false,
    }
  },
  watch: {},
  created() {
    console.log('######AutoForm')
  },
  mounted() {},
  methods: {
    showPopup(p) {
      this.popups[p] = true
    },
    load(schema, isDesign = false) {
      if (isDesign) this.isDesign = true
      const { model, popups, rules } = __Constructor__(schema)
      this.popups = popups
      // this.model = initData ? initData : model
      this.model = model
      this.schema = schema
      setTimeout(() => {
        this.$refs.uForm.setRules(rules)
      })
    },
    getData() {
      this.$refs.uForm
        .validate()
        .then((res) => {
          uni.$u.toast('校验通过')
          console.log(JSON.stringify(this.model))
        })
        .catch((errors) => {
          uni.$u.toast('校验失败')
        })
    },

    DTPConfirm(e) {
      console.log('DTPConfirm', e)
      this.popups[e.modelName] = false
    },
    DTPCancel(target) {
      console.log('DTPCancel', target)
      this.popups[target] = false
    },
    DTPChange(e) {
      console.log('DTPChange', e)
    },
    DTPClose(target) {
      console.log('DTPClose', target)
      this.popups[target] = false
    },
    groupChange(e) {
      console.log('groupChange', e)
    },
    clickAll(e) {
      console.log(e)
    },
  },
}
</script>

<style>
.page-wrap {
}
.form-wrap {
  padding: 0 12px;
}
.f-title {
  padding: 12px 0;
  text-align: center;
  font-size: 20px;
}
.design-btns {
  display: flex;
  align-items: center;
  width: calc(98vw);
  position: relative;
  margin-left: -10px;
  top: 44px;
  left: 0;
  height: 50px;
  border: 2px solid #398ade;
  z-index: 9999;
  border-radius: 4px;
}
</style>
